import { Callout, Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Focused Outline

An outline around a focused widget that does not affect its layout.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.foundation/FFocusedOutline-class.html"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='focused-outline' query={{}} height={300}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FFocusedOutline(
      focused: true,
      child: Container(
        decoration: BoxDecoration(
          color: context.theme.colors.primary,
          borderRadius: BorderRadius.circular(8),
        ),
        padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 12),
        child: Text(
          'Focused',
          style: context.theme.typography.base.copyWith(
            color: context.theme.colors.primaryForeground,
          ),
        ),
      ),
    );
    ```
  </Tabs.Tab>
</Tabs>
